<template>
  <view class="shelf-container">
    <!-- 上架单号扫码/输入 -->
    <view class="custom-card">
      <view class="card-title">上架单号</view>
      <u-input v-model="shelfOrderNo" placeholder="请输入或扫码上架单号" @confirm="onShelfOrderConfirm" clearable>
        <u-icon slot="append" name="scan" size="28" color="#2979ff" @click="onScanShelfOrder" />
      </u-input>
      <u-button type="primary" size="mini" style="margin-top: 18rpx;" @click="onShelfOrderConfirm">确定</u-button>
      <view v-if="shelfOrderNoFinal" class="shelf-order-info">当前上架单号：<text class="shelf-order-no">{{ shelfOrderNoFinal }}</text></view>
    </view>

    <!-- 库位扫码/选择，仅在有上架单号后显示 -->
    <view v-if="shelfOrderNoFinal" class="custom-card">
      <view class="card-title">库位扫码/选择</view>
      <view class="location-row" @click="showLocationPicker = true">
        <u-input v-model="shelfLocationName" placeholder="请选择或扫码库位" readonly class="location-input" :focus="false" />
        <u-icon name="scan" size="28" color="#2979ff" class="location-scan-icon" @click.stop="onScanLocation" />
      </view>
      <u-picker :show="showLocationPicker" :columns="[locationList.map(l => l.name)]" @confirm="onLocationConfirm" @cancel="showLocationPicker = false" />
      <view v-if="shelfLocationName" class="shelf-location-info">当前库位：<text class="shelf-location-no">{{ shelfLocationName }}</text></view>
    </view>

    <!-- SKU扫码/统计，仅在有库位后显示 -->
    <view v-if="shelfOrderNoFinal && shelfLocationName" class="custom-card">
      <view class="card-title">SKU扫码上架</view>
      <u-input v-model="skuInput" placeholder="请输入或扫码SKU条码" @confirm="onSkuScan" clearable>
        <u-icon slot="append" name="scan" size="28" color="#2979ff" @click="onScanSku" />
      </u-input>
      <u-button type="primary" size="mini" style="margin-top: 18rpx;" @click="onSkuScan">扫码/录入</u-button>
      <view class="sku-scan-summary">已扫描：<text class="sku-scan-count">{{ scannedList.length }}</text> 件</view>
      <view v-if="scannedList.length > 0" class="sku-scan-list">
        <view class="sku-scan-item" v-for="(item, idx) in scannedList" :key="idx">
          <text>{{ idx + 1 }}. {{ item.barcode }} <span v-if="item.skuName">({{ item.skuName }})</span></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      shelfOrderNo: '',
      shelfOrderNoFinal: '',
      shelfLocationId: '',
      shelfLocationName: '',
      showLocationPicker: false,
      skuInput: '',
      scannedList: [],
      locationList: [
        { id: 'L1', name: 'A区-01' },
        { id: 'L2', name: 'A区-02' },
        { id: 'L3', name: 'B区-01' }
      ],
      // 模拟SKU数据库
      skuDb: [
        { id: 'sku1', name: '商品A', length: 30, width: 20, height: 10, weight: 2.5, quantity: 10 },
        { id: 'sku2', name: '商品B', length: 25, width: 18, height: 12, weight: 1.8, quantity: 5 },
        { id: 'sku3', name: '商品C', length: 40, width: 22, height: 15, weight: 3.2, quantity: 8 }
      ]
    }
  },
  methods: {
    onScanShelfOrder() {
      uni.scanCode({
        success: (res) => {
          this.shelfOrderNo = res.result
          this.onShelfOrderConfirm()
        },
        fail: () => {
          uni.$u.toast('扫码失败')
        }
      })
    },
    onShelfOrderConfirm() {
      const code = this.shelfOrderNo.trim()
      if (!code) {
        uni.$u.toast('请输入或扫码上架单号')
        return
      }
      this.shelfOrderNoFinal = code
      uni.$u.toast('上架单号录入成功')
    },
    onScanLocation() {
      uni.scanCode({
        success: (res) => {
          const code = res.result.trim()
          const found = this.locationList.find(l => l.id === code || l.name === code)
          if (found) {
            this.shelfLocationId = found.id
            this.shelfLocationName = found.name
            uni.$u.toast('库位已填充')
          } else {
            this.shelfLocationId = code
            this.shelfLocationName = code
            uni.$u.toast('扫码库位未在列表，已直接填入')
          }
        },
        fail: () => {
          uni.$u.toast('扫码失败')
        }
      })
    },
    onLocationConfirm(e) {
      const idx = e.indexs[0]
      this.shelfLocationId = this.locationList[idx].id
      this.shelfLocationName = this.locationList[idx].name
      this.showLocationPicker = false
      this.scannedList = []
    },
    onScanSku() {
      uni.scanCode({
        success: (res) => {
          this.skuInput = res.result
          this.onSkuScan()
        },
        fail: () => {
          uni.$u.toast('扫码失败')
        }
      })
    },
    onSkuScan() {
      const code = this.skuInput.trim()
      if (!code) {
        uni.$u.toast('请输入或扫码SKU')
        return
      }
      // 模拟查找SKU
      const found = this.skuDb.find(sku => sku.id === code || sku.name === code)
      this.scannedList.push({ barcode: code, skuName: found ? found.name : '' })
      this.skuInput = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.shelf-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}
.custom-card {
  background: #fff;
  border-radius: 16rpx;
  margin: 20rpx;
  padding: 30rpx 20rpx 10rpx 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
}
.card-title {
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 18rpx;
}
.sku-info-row {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 12rpx;
  gap: 10rpx;
}
.location-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
  width: 100%;
  cursor: pointer;
}
.location-input {
  flex: 1;
  min-width: 0;
  pointer-events: none;
  background: #f8f9fa;
}
.location-scan-icon {
  margin-left: 6rpx;
  cursor: pointer;
  transition: color 0.2s;
}
.location-scan-icon:active {
  color: #1656a0;
}
.shelf-order-info {
  margin-top: 12rpx;
  font-size: 26rpx;
  color: #2979ff;
}
.shelf-order-no {
  font-weight: bold;
}
.shelf-location-info {
  margin-top: 12rpx;
  font-size: 26rpx;
  color: #19be6b;
}
.shelf-location-no {
  font-weight: bold;
}
.sku-scan-summary {
  margin-top: 18rpx;
  font-size: 26rpx;
  color: #333;
}
.sku-scan-count {
  color: #fa3534;
  font-weight: bold;
}
.sku-scan-list {
  margin-top: 10rpx;
  background: #f8f9fa;
  border-radius: 10rpx;
  padding: 10rpx;
}
.sku-scan-item {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 6rpx;
}
</style> 